<template>
    <div>
      <header >
           <van-nav-bar
            title="首页"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
            />
      </header>
      <main>
        <van-swipe :autoplay="3000">
        <van-swipe-item v-for="it in images" :key="it.id">
        <img :src="it.url"  class="bannerImg"/>
        </van-swipe-item>
        </van-swipe>
        <div class="cmd-info">
            <p class="p-title">{{detailList.title}}</p>
            <span class="span-price"><em>￥</em>{{detailList.price}}</span>
             <div class="cmd-box1">{{detailList.accessoryHints}}</div>
             <button class="addBtn">加入购物车</button>
            <hr>
            <!-- <div class="shop-box">
              <img :src="detailList.shop.coverUrl" alt="">
              <div class="right-box">
                   <p>{{detailList.shop.title}}</p>
                   <span>{{detailList.shop.shopScoreText}}</span>
              </div>
            </div> -->
        </div>
        <h2 class="h-title">
          <span class="line"></span>
          <span class="text">淘宝图文详情</span>
          <span class="line"></span>
        </h2>
        <div v-for="it in images" :key="it.id" class="bigImg">
          <img :src="it.url" alt="" class="bannerImg">
        </div>
      </main>   
      
    </div>
</template>

<script>
import { detailApi } from'../../apis/homeApi'


export default {
    data(){
        return{
            detailList:[],
            images:[]
        }
    },

    async created(){
       const  id  = this.$route.query.id
        // console.log(id)
        let detail = await detailApi(id)
        //  console.log(detail);
        if(detail.code === 200) {
            let detailist = detail.data.detail
            let imgs = detail.data.detail.photo
            this.detailList = detailist
             console.log(detailist);
            this.images = imgs
            // console.log(detailist);
            console.log(imgs);
            return
        }
    },

  methods: {
      
    onClickLeft () {
      this.$router.back()
    },
  }
}
</script>

<style lang="less" scoped>
    .bannerImg{
        width: 390px;
        height: 390px;
    }
   main{
      height: 800px;
      overflow: auto;
      .cmd-info{
      padding: 0.267rem 0.267rem 0.267rem 0.32rem;
      background: #fff;
      .p-title{
        font-size: 14px;
        color: #43240c;
        
      }
      .cmd-box1{
        font-size: 12px;
        color: #b1a9a5;
        padding-top: 5px;
        padding-bottom: 5px;
        }
      
      .span-price{
        color: #fa585a;
        font-size: 1.5rem;
        font-weight: 700;
      }
      .addBtn{
        color: #fff;
        border: none;
        width: 100px;
        height: 35px;
        border-radius: 5px;
        background-color: #fa585a;
        
      }
      .shop-box{
        display: flex;
        >img{
          width: 100px;
          height: 100px;
        }
        .right-box{
          padding-left: 10px;
          > p {
            font-size: 15px;
            color: #a7591dbd;
          }
          >span{
            font-size: 13px;
            color: #a7591dbd;
          }
        }
      }
      
   }
    .h-title{
      text-align: center;
      color: #b1a9a5;
      background-color: #fff;
      height: 1.067rem;
      line-height: 1.067rem;
      font-size: 0;
      .line{
        background-color: #b1a9a5;
        width: 10%;
        height: 1px;
        display: inline-block;
        margin: 0.08rem 0;
      }
      .text{
        padding: 0 0.2rem;
        box-sizing: border-box;
        font-size: .32rem;
      }
     
  }
   }
  
</style>



